<template>
  <div class="header">
    <h1 class="title">尚硅谷低代码平台</h1>

    <el-space>
      <el-button type="primary" @click="showCode">出码</el-button>
      <!-- <router-link to="/preview" target="_blank">
        <el-button type="primary" size="small">预览</el-button>
      </router-link> -->
      <el-button type="primary" @click="preview">预览</el-button>
    </el-space>
  </div>

  <el-dialog v-model="visible" title="代码">
    <div class="code-container">
      <CodeEditor v-model="code" :options="{ readOnly: true }" />
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useCompileCode } from "@/components/CodeEditor/hooks";
import useEditorStore from "@/store/modules/editor";

defineOptions({
  name: "Header",
});

const editorStore = useEditorStore();

const preview = () => {
  /*
    localStorage 永久存储
    sessionStorage 会话存储（关闭浏览器存储的内容会自动清除）

    只能存储字符串数据
  */
  sessionStorage.setItem(
    "componentList",
    JSON.stringify(editorStore.componentList)
  );
  window.open("/preview");
};

const { compileCode } = useCompileCode();
const code = ref("");
const visible = ref(false);
const showCode = async () => {
  visible.value = true;
  code.value = await compileCode(
    {
      componentList: editorStore.componentList,
    },
    "list"
  );
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.title {
  margin: 0;
  font-size: 18px;
}

.code-container {
  height: 400px;
}
</style>
